<template>
  <!-- App -->
  <f7-page color-theme="blues">
    <f7-navbar>
      <f7-nav-left back-link="返回"></f7-nav-left>
      <f7-nav-title>{{ ["申请添加朋友", "回复申请"][isButton] }}</f7-nav-title>
    </f7-navbar>

    <div class="header">
      <label for="好友昵称" style="color: #a3a3a3"> 好友昵称 </label>
      <input
        type="text"
        placeholder="好友昵称"
        style="
          background-color: #f7f7f8;
          width: 100%;
          height: 40px;
          padding: 10px;
        "
        v-model="from.replyAccountName"
      />
      <h5 style="margin-top: 20px">
        {{ ["发送添加申请", "回复信息"][isButton] }}
      </h5>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        class="textinput"
        v-model="from.replyInfo"
      >
      </textarea>
      <button class="col button button-raised button-round" @click="submit">
        发送
      </button>
    </div>
  </f7-page>
</template>

<script>
import store from "@/store";
import { insertMyRequestInfo, updateMyRequestInfo } from "@/api/IM";
import { mapState } from "vuex";
export default {
  props: ["firend", "isButton", "accountId"],
  data() {
    return {
      from: {
        replyInfo: "",
        replyAccountName: "",
      },
    };
  },
  computed: {
    ...mapState({
      user: (state) => state.user.userInfo,
    }),
  },
  methods: {
    submit() {
      if (0 == this.isButton) {
        this.addpeople();
      } else {
        this.applyClick();
      }
    },
    // 发送申请
    addpeople() {
      let obj = {
        accountId: this.user.userId,
        requestAccount: this.user.userName,
        replyAccount: this.firend.userName,
        replyAccountId: this.firend.userId,
        requestInfo: this.from.replyInfo,
        requestAccountName: this.from.replyAccountName,
      };
      insertMyRequestInfo(obj).then((res) => {
        if (res.code != 200) {
          return this.$f7.dialog.alert(res.msg, "提示");
        }
        let _this = this;
        this.$f7.dialog.alert(res.msg, "提示", function () {
          _this.$f7router.back();
        });
      });
    },
    //0.待加入 1.同意 2拒绝
    applyClick() {
      let obj = {
        id: this.accountId,
        status: 1,
        replyAccountId: this.user.userId,
        replyAccount: this.user.userName,
        accountId: this.firend.userId,
        requestAccount: this.firend.userName,
        requestAccountName: this.firend.nickName,
        replyInfo: this.from.replyInfo,
        replyAccountName: this.from.replyAccountName,
      };
      updateMyRequestInfo(obj).then((res) => {
        if (res.code != 200) {
          this.$f7.dialog.alert(res.msg, "提示");
          return;
        }
        let _this = this;
        this.$f7.dialog.alert(res.msg, "提示", function () {
          _this.$f7router.back();
          let obj = {
            queryParams: {
              pageNum: 1,
              pageSize: 50,
              requestId: _this.user.userId,
              userName: "",
            },
            isSearch: true,
          };
          store.dispatch("getUserList", obj);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  width: 90%;
  height: 100px;
  margin: 10px auto;
  h5 {
    color: #a3a3a3;
  }
}

.textinput {
  width: 100%;
  height: 100px;
  background-color: #f7f7f8;
  padding: 10px;
}

.button {
  margin: 10px auto;
  width: 100px;
}
</style>